require("../css/mine.less")
document.ready(function(){
    //添加底部
    window.$utils.tabbar("mine")
    //获取dom
    let headImg=document.querySelector("#headImg")//头像的图片
    let changeImg=document.querySelector("#changeImg")//上传的文件选择框
    let nickName=document.querySelector("#nickName")//昵称
    let sign=document.querySelector("#sign")//签名
    let MotionData=document.querySelector("#MotionData")//运动数据

    MotionData.addEventListener("click",function(){
        location.href="./motion.html"
    })

    //从本地存储中获取用户数据
    let userId = JSON.parse(localStorage.getItem("user")).userId

    //给头像图片书写事件
    headImg.addEventListener("click",function(event){
        //阻止a标签跳转
        event.preventDefault()
        //触发文件选择框的点击事件
        changeImg.click()
    })

    //文件选择框事件
    changeImg.addEventListener("change",function(){
        //1 获取选择 的文件
        let file=this.files[0]//获取到选择的文件
        //2 创建一个FormData对象
        let fd=new FormData()
        //3 把选择中的文件对象添加到FormData对象中
        fd.append("imgurl",file)
        //4 发送ajax请求，上传图片
        axios.post(window.$utils.url+"/users/upload",fd)
        .then(function(res){
            let ret=res.data
            //上传成功
            if(ret.status==0){
                //根据返回的图片路径显示上传的图片
                headImg.src=window.$utils.url+ret.data
                //再次发起请求，去修改头像，-->把头像存到数据库中
                axios.post(window.$utils.url+"/users/userEdit",{
                    "userId":userId,
                    "imgurl":ret.data
                })
                .then(function(res){
                    console.log(res.data);
                })
                .catch(function(error){
                    console.log(error);
                })
            }
        })
        .catch(function(error){
            console.log(error);
        })
    })
    //页面打开时就调用获取用户数据的方法
    getMainData()
    // 封装显示数据 获取用户数据 
    function getMainData(){
        axios.get(window.$utils.url+`/users/accountinfo?userId=${userId}`)
        .then(function(res){
            let ret=res.data;
            //把新的数据保存到本地
            localStorage.setItem("user",JSON.stringify(ret.data))
            if(ret.status==0){
                //渲染数据
                render(ret.data)
            }
        })
        .catch(function(error){
            console.log(error);
        })
    }

    //  封装一个函数来显示页面的数据 
    function render(obj){
        //头像 
        headImg.src=obj.imgurl?window.$utils.url+obj.imgurl:require("../imgs/headerPic.jpg")
        //昵称
        nickName.textContent=obj.nickname
        //个性签名
        sign.textContent=obj.sign?obj.sign:"这个人很懒,什么也没有写~~~"
    }
})